<template>
  <div>
    <!-- 选择充值金额(选择充值卡) -->
    <div class="flex_y_center margin_bottom_15">
      <div class="inp_title">充值金额：</div>
      <el-select
        v-model="storedType"
        clearable
        placeholder="请选择充值金额"
        style="width: 50%"
        @change="chooseStored"
        @focus="getStoredCard"
      >
        <el-option
          v-for="(item, index) of storedCardList"
          :key="index"
          :label="item.prepaid_name"
          :value="item.id"
        />
        <!--  -->
        <el-option
          v-if="oCardInfo.is_custom == 'Y'"
          label="自定义充值金额"
          value="customAmount"
        />
      </el-select>
    </div>
    <!-- 输入自定义充值金额 -->
    <div
      v-show="storedType == 'customAmount'"
      class="flex_y_center margin_bottom_15"
    >
      <div class="inp_title">自定义充值金额：</div>
      <el-input
        v-model="rechargeForm.card_amount"
        clearable
        :placeholder="'最少充值' + oCardInfo.min_amount + '元'"
        style="width: 50%"
      />
    </div>
    <!-- 选择赠送礼包 -->
    <div
      v-show="rechargeForm.is_gift == 'Y'"
      class="flex_y_center margin_bottom_15"
    >
      <div class="inp_title">赠送礼包：</div>
      <el-select
        v-model="giftId"
        clearable
        placeholder="请选择礼包"
        style="width: 50%"
        @change="chooseGift"
        @focus="getGift"
      >
        <el-option
          v-for="(item, index) of giftList"
          :key="index"
          :label="item.gift_desc"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="flex_between" style="margin-top: 15px">
      <div></div>
      <el-button type="primary" @click="openSettle">充值</el-button>
    </div>

    <!-- 结算对话框 -->
    <el-dialog append-to-body title="收费" :visible.sync="dialogToll">
      <collection
        :o-prepaid-sn="prepaidSn"
        :receive-payment="rechargeForm.card_amount"
        @send="$emit('send')"
      />
    </el-dialog>
  </div>
</template>

<script>
  import {
    getPrepaidList,
    getPrepaidGift,
    getPrepaidGiftVal,
  } from '@/api/storedValue'
  import { payHandle } from '@/api/order'

  export default {
    components: {
      collection: () => import('./components/collection.vue'),
    },
    props: {
      oClearBool: {
        type: Boolean,
        default: false,
      },
      oCardInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        storedCardList: [], // 存放充值卡列表
        storedType: '', // 充值类型  customAmount自定义充值金额
        giftList: [], // 存放获取的礼包列表
        giftId: '', // 礼包id

        rechargeForm: {
          is_gift: '', // 是否赠送礼包
          card_amount: '', // 充值金额
          receive_type: '', // 领取类型
          prepaid_gift_type: '', // 礼包类型
          prepaid_gift_value: '', // 礼包值
        },

        dialogToll: false, // 控制结算对话框的显示和隐藏
        prepaidSn: '', // 存放当前充值结算单单号
      }
    },
    watch: {
      // 该变量为true时，证明对话框关闭，初始化对象量属性值
      oClearBool(newValue) {
        if (!newValue) {
          this.storedCardList = []
          this.storedType = ''
          this.giftList = []
          this.giftId = ''
          for (let item in this.rechargeForm) {
            this.rechargeForm[item] = ''
          }
        }
      },

      dialogToll(newValue) {
        if (!newValue) {
          this.$emit('send')
        }
      },
    },
    methods: {
      // 获取充值卡列表
      getStoredCard() {
        if (this.storedCardList.length == 0) {
          const params = {
            prepaid_type: 'stored',
          }
          getPrepaidList(params).then((res) => {
            this.storedCardList = res.data
          })
        }
      },
      // 选择充值卡，取出当前选择充值卡对应属性
      chooseStored() {
        // 每次选择完充值卡后，初始化form中的指定值
        for (let item in this.rechargeForm) {
          this.rechargeForm[item] = ''
        }
        this.giftId = ''
        // 每次选择完充值卡后，取出需要的值
        for (let item of this.storedCardList) {
          if (item.id == this.storedType) {
            this.rechargeForm.is_gift = item.is_gift
            this.rechargeForm.card_amount = item.min_amount
          }
        }
      },
      // 获取礼包
      getGift() {
        const params = {
          prepaid_amount: this.rechargeForm.card_amount,
        }
        getPrepaidGift(params).then((res) => {
          this.giftList = res.data
        })
      },
      // 选择礼包后，取出当前选择礼包对应属性
      chooseGift() {
        for (let item of this.giftList) {
          if (item.id == this.giftId) {
            this.rechargeForm.receive_type = item.receive_type
          }
        }
        this.getGiftVal()
      },
      // 获取当前选择的礼包的礼包值
      getGiftVal() {
        const params = {
          id: this.giftId,
        }
        getPrepaidGiftVal(params).then((res) => {
          this.rechargeForm.prepaid_gift_type = res.data[0].prepaid_gift_type
          this.rechargeForm.prepaid_gift_value = res.data[0].prepaid_gift_value
        })
      },
      // 创建充值结算单
      openSettle() {
        const params = this.rechargeForm
        params.prepaid_card_id = this.oCardInfo.id
        params.customer_id = this.oCardInfo.customer_id
        params.channel_type = 'prepaid'

        // 当选择自定义充值时，判断当前输入金额是否小于最小充值金额
        if (this.storedType == 'customAmount') {
          if (
            parseInt(this.rechargeForm.card_amount) <
            parseInt(this.oCardInfo.min_amount)
          ) {
            this.$message.error('当前输入金额小于最小充值金额')
            return
          } else {
            this.rechargeForm.is_gift = 'N'
          }
        }

        payHandle(params).then((res) => {
          this.prepaidSn = res.data.prepaid_sn
          this.dialogToll = true
        })
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
  .inp_title {
    width: 30%;
    text-align: right;
  }
  .margin_bottom_15 {
    margin-bottom: 15px;
  }
</style>
